<template>
	<el-row>
	<el-col :span="span" style="padding-right:10px">
		<el-select size="small" clearable v-model="page.shi" value-key="name" :title="page.shi.name"
		 filterable placeholder="请选择市" @change="xzshi">
			<el-option v-for="item in search.shi" :key="item.areaId" :label="item.name" :value="item">
			</el-option>
		</el-select>
	</el-col>
	<el-col :span="span" style="padding-right:10px">
		<el-select size="small" clearable v-model="page.xian" value-key="name" :title="page.xian.name"
		 filterable placeholder="请选择区县" @change="xzxian">
			<el-option-group v-for="group in search.xian" :key="group.name">
				<el-option v-for="item in group.childs" :key="item.areaId" :label="item.name" :value="item"></el-option>
			</el-option-group>
		</el-select>
	</el-col>
		<el-col :span="span" style="padding-right:10px" v-if="buyao!=='bm'">
			<el-select size="small" v-model="page.orgDept" placeholder="请选择部门" multiple filterable class="handle-input" @change="xzbumen">
				<el-option v-for="item in org_dept" :key="item.id" :label="item.name" :value="item.value"></el-option>
			</el-select>
		</el-col>
	</el-row>
</template>

<script>
	export default {
		name: 'search',
		props:['buyao'],
		data() {
			return {
				page: {
					shi:'',
					xian:''
				},
				search: {
					shi:[],
					xian:[]
				},
				org_dept:[],
				span:12
			}
		},
		created() {
			if(this.buyao !=='bm'){
				this.span = 8
			} else {
				this.span = 12
			}
		},
		mounted() {
			this.getData();
			this.getShi()
		},
		methods: {
			//选择部门
			xzbumen(val) {
				this.page.orgDept = val
				this.$emit("test",this.page)
			},
			//地区联动
			getShi() { //获取市
				this.$get("/area/2/child").then(r => {
					this.search.shi = r.data.data;
				})
			},
			xzshi(val) { //选择市
				if (!val) {
					this.page.shi = ''
					this.search.xian = [];
					this.page.xian = '';
					this.$emit("test",this.page)
					return false;
				}
				this.page.xian = '';
				this.page.shi = val
				this.$emit("test",this.page)
				if (val.areaId.length > 0) {
					this.$get("/area/child?parentIds=" + val.areaId).then(r => {
						this.search.xian = r.data.data;
					})
				}

			},
			xzxian(val) { //选择县
				if (!val) {
					this.$emit("test",this.page)
					return this.page.xian = ''
				}
				this.page.xian = val;
				this.$emit("test",this.page)
			},
			getData() { //得到字典内信息
				var shuxing = 'org_dept';
				this.$get("/dict/getDictTypes/" + shuxing).then(r => {
					this.org_dept = r.data.data.org_dept;
				})
			},
		}
	};
</script>

<style scoped>
	.searchForm {
		margin-top: 10px;
		border-bottom: dashed 1px #ccc;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}
</style>
